<template>
  <div class="regist-wrapper">
    <h3 class="register-title">
      <el-icon><Document /></el-icon>
      <p class="title-text">患者叫号</p>
    </h3>
    <el-divider />
    <div class="ly-filter">
      <el-input placeholder="请输入患者病历号 " v-model="searchValue.caseNumber"></el-input>
      <el-input placeholder="请输入患者姓名 " v-model="searchValue.realName"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <el-table :data="tableData.records" border>
      <el-table-column label="序号">
        <template #default="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <!--<el-table-column> 组件中，prop 属性用于指定表格列对应的数据字段。-->
      <el-table-column label="患者姓名" prop="realName"></el-table-column>
      <el-table-column label="患者病历号" prop="caseNumber"></el-table-column>
      <el-table-column label="操作" width="240px" >
        <template #default="scope">
          <template v-if="scope.row.visitState === 1">
            <el-button type="primary" size="small" plain @click="jiezhen(scope.row.id)">创建病历</el-button>
            <el-button type="danger" size="small" @click="del(scope.row.id, 0)">跳过</el-button>
            <el-button type="warning" size="small" @click="call(scope.$index + 1, scope.row.realName)">叫号</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px;"
      background
      :total="tableData.total"
      v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNo"
      @change="getTableData"></el-pagination>
  </div>
</template>

<script setup>
import { Document } from '@element-plus/icons-vue'
import { get, post } from '@/utils/axios'
import { reactive, ref } from 'vue'
import { url } from './api'
import { RegisterStore } from '@/stores/counter'
import router from '@/router'
const registerStore = RegisterStore() // 状态管理
const tableData = reactive({
  records: [],
  pages: 0,
  total: 0
})
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  realName: '',
  caseNumber: '',
  visitState: 1
})
const searchValue = reactive({
  realName: '',
  caseNumber: ''
})
const dialog = reactive({
  show: false,
  title: '',
  id: null
})
getTableData()
function search () {
  params.pageNo = 1
  params.realName = searchValue.realName
  params.caseNumber = searchValue.caseNumber
  getTableData()
}
function getTableData () {
  get(url.list, params, content => {
    console.dir(content)
    tableData.records = content.records
    tableData.pages = content.pages
    tableData.total = content.total
  })
}
function jiezhen(id) {
  post(url.jiezhen, { id }, content => {
    registerStore.set(content) // 状态管理 存储数据
    router.push('/medical') // 跳转路由
  })
}
function call (num, realName) {
  get(url.call, { num, realName }, content => {
  })
}
</script>

<style scoped lang="scss">
.regist-wrapper {
  .register-title {
    display: flex;
    height: 40px;
    align-items: center;
    .title-text {
      margin-left: 5px;
    }
  }
}
</style>
